<template>
    <div class="page_container">
        <navBar :config="navBarConfig" />
        <div class="page_content">
            <el-form ref="form" :model="aothurInfo" label-width="150px" label-title="left">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="昵称">
                            <el-input v-model.trim="aothurInfo.userName" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号码">
                            <el-input v-model.trim="aothurInfo.mobilePhone" placeholder="暂未设置手机号码" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="注册邮箱">
                            <el-input v-model.trim="aothurInfo.email" placeholder="暂未设置邮箱" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="职称">
                            <el-input v-model.trim="aothurInfo.title" placeholder="暂未设置职位"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单位">
                            <el-input v-model.trim="aothurInfo.company" placeholder="暂未设置单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="个人简介">
                            <el-input v-model.trim="aothurInfo.personIntroduction" type="textarea" style="width: 60%;"
                                show-word-limit placeholder="暂未设置简介" maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="国家地区">
                            <el-input v-model.trim="aothurInfo.country" placeholder="中国" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所在省市街道地址">
                            <el-input v-model.trim="aothurInfo.contactAddress" placeholder="街道地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="22">
                        <el-button size="small" type="primary" style="margin-left: 150px;border-radius:5px"
                            @click="changeaothurInfo">保存</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { changeUserInfoRequest, getUserInfoRequest } from '@/api/user';
import Cookie from 'js-cookie';
export default {

    name: 'BaiaoweifanUiModifyInformation',
    data() {
        return {
            navBarConfig: {
                leftTool: true,
                rightTool: false,
            },
            aothurInfo: {
                userName: '',
                mobilePhone: '',
                email: '',
                title: '',
                company: '',
                personIntroduction: '',
                country: '',
                contactAddress: '',
            }
        };
    },
    created() {
        this.aothurInfo = JSON.parse(localStorage.getItem('userInfo'))
    },
    mounted() {
    },

    methods: {
        async changeaothurInfo() {
            try{
                const res = await changeUserInfoRequest(this.aothurInfo)
            if (res.code !== 200) {
                return this.$message.error(res.message);
            }
            const userInfo = await getUserInfoRequest()
            this.$store.commit('login/SET_USERINFO', userInfo.data)
            this.aothurInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.$message({
                message: '个人信息修改成功！',
                type: 'success'
            });
            }catch(error){
                this.$message.error('系统错误，请联系管理员！')
            }
        }
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner,
.el-textarea__inner {
    border-radius: 5px !important;
    width: 60%;
    height: 34px;
}

.page_content {
    padding: 35px !important;
}
</style>